import { Text, View } from "@tarojs/components";
import clsx from "clsx";
interface Props<T extends string | number | boolean> {
  className?: string
  value: T
  options: IOption<T>[]
  onChange?: (value: T, option: IOption<T>) => void
}
export default function GpRadioGroup<T extends string | number | boolean>({
  className,
  value,
  options,
  onChange
}: Props<T>) {
  return (
    <View className={clsx("flex flex-row items-center gap-[80px]", className)}>
      {
        options.map(option => (
          <View key={option.value} className="flex flex-row items-center gap-[16px]" onClick={() => {
              if (value === option.value) return
              onChange?.(option.value, option)
            }}>
            <View className={clsx("flex flex-row justify-center items-center size-[28px] rounded-[50%] border-2 border-solid box-border",
              value === option.value ? "border-theme" : "border-placeholder"
            )}>
              {
                value === option.value
                ? <View className="bg-theme size-[14px] rounded-[50%]"></View>
                : null
              }
            </View>
            <Text className={clsx("text-[28px]", value === option.value ? "text-theme" : "text-primary")}>{option.label}</Text>
          </View>
        ))
      }
    </View>
  )
}
